<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-01-01
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script>
    function toRegist() {
        location.href = '${pageContext.request.contextPath}/regist?_type=index'
    }

    function toLogin() {
        location.href = '${pageContext.request.contextPath}/login.jsp'
    }
    function showDrop(){

        alert("555555555555555555")


    }

</script>
<style>
    .loginUserName{
        position: relative;
        cursor:pointer;
        /* border: solid 1px red; */

    }

    .loginUserName .dropdown{
        display: none;
        position: absolute;
        width: 150px;
        height: auto;
        /* background-color: #ccc; */
        top: 20px;
        right:0px;
        /* border:solid 1px green; */
    }

    .loginUserName .dropdown ul{
        list-style: none;
        /* background-color: #ccc; */

    }

    .loginUserName .dropdown ul li{
        height: 30px;
        width: 200px;
        line-height: 30px;
        border: solid 1px #ccc;
        padding-left: 20px;
        cursor: pointer;
    }

    .loginUserName .dropdown ul li:hover{
        background-color: #ccc;
    }
</style>

<div class="top_wraps">
    <div class="top_container">
        <div class="logo">
            <img src="${pageContext.request.contextPath}/assets/imgs/logo.png"/>
            <div style="clear: both;"></div>

        </div>
        <div class="channels">
            <div class="channel"><a href="${pageContext.request.contextPath}/user/home"> 我的主页</a></div>
            <div class="channel"><a href="#">博客</a></div>
            <div class="channel"><a href="#">随笔</a></div>
            <div class="channel"><a href="#">分享</a></div>
            <div class="channel"><a href="#">标签</a></div>
        </div>


        <div class="current_user">

            <div style="display: inline-block;margin-right: 50px;">

                <input type="text" placeholder="公共搜索" style="outline: none; border: none;width: 100px;">

            </div>

            <div class="unloginStatus">
                <div class="btnContainer">
                    <button type="button" class="loginBtn" onclick="toLogin()">登录</button>
                </div>
                <div class="btnContainer">
                    <button type="button" class="registBtn" onclick="toRegist()">注册</button>
                </div>

            </div>
            <div class="loginStatus" style="display: inline-block;">
                <div id="loginUser" style="display:none ">

                    <span style="display:inline-block;margin-right: 20px;" >
                        <a href="${pageContext.request.contextPath}/post?_type=editing">写文章</a></span>
                    <span id="loginUserName" class="loginUserName" >

                        <span class="username" >  张三</span>

								<div class="dropdown" >
										<ul>
										<li  >  <a href="${pageContext.request.contextPath}/user/home"> 我的主页</a> </li>
											<li>编辑资料</li>
											<li  >  <a href="${pageContext.request.contextPath}/admin/home"> 后台管理</a> </li>
											<li><a href="${pageContext.request.contextPath}/logout">  退出</a>
                                               </li>
										</ul>

								</div>

							</span>
                </div>
            </div>

        </div>
    </div>

    <script>

        $(function () {
            //判断当前是否登录
            //    isLogin
            let url = "${pageContext.request.contextPath}/user/home?_type=isLogin"
            $.ajax(url, {
                type: 'post',
                dataType: 'json',
                success: function (ret) {
                    if (ret.success) {
                        $(".btnContainer").hide();
                        $("#loginUser").show();
                        $("#username").text(ret.user.name);
                    }
                }
            })

            console.log("点击事件33333",$(".username"))

            $(".username").click(function(event){
                $(".dropdown").show()
                event.stopPropagation();//阻止事件冒泡
                console.log("点击事件22222");
                console.log($(".dropdown"))

            })


            $("body").click(function(){
                $(".dropdown").hide()
            })


        })





    </script>

</div>
